<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.container {
			width: 300px;
			height: 300px;
			background-color: skyblue;
			display: grid;
			/* 单元格 */
			grid-template-rows: 100px;
			grid-template-columns: repeat(3, 100px);

			/* 一般俩俩配合使用 */
			/* 默认值就是 row，按行排列的隐式网格 */
			grid-auto-flow: row;
			/* 默认撑 满，可以手动修改行的高度 */
			grid-auto-rows: 100px;
		}

		.container div {
			/* 子项 */
			background-color: sienna;
		}

		.container2 {
			width: 300px;
			height: 300px;
			background-color: skyblue;
			display: grid;
			grid-template-rows: repeat(3, 100px);
			grid-template-columns: 100px;

			/* 一般俩俩配合使用 */
			grid-auto-flow: column;
			grid-auto-columns: 100px;
		}

		.container2 div {
			background-color: salmon;
		}
	</style>
</head>

<body>
	<h2>行：默认规则就是按行排列，多出的子项会自动撑 满整个单元格，但也可以手动修改大小</h2>
	<div class="container">
		<div>01</div>
		<div>02</div>
		<div>03</div>
		<div>04</div>
		<div>05</div>
	</div>

	<h2>列：默认规则是按行排列，但可以手动修改 按列排列</h2>
	<div class="container2">
		<div>01</div>
		<div>02</div>
		<div>03</div>
		<div>04</div>
		<div>05</div>
	</div>
</body>

</html>